{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block head_script %}
<script type="text/javascript" src="/static/js/item-thumbnail.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#feature-slide').carousel({
            interval: 2000,
        });

        init_thumbnail();
    });
</script>
{% endblock %}

{% block main_content %}
<div id="feature-slide" class="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="/static/promo-1.jpg" alt="Feature Image" />
            <div class="carousel-caption">
                <h4>Introducing Dessert House</h4>
                <p>Dessert House is the most recently opened dessert house at downtown. Millions of desserts are available for you to savor! Take Action NOW!</p> 
            </div>
        </div>
        <div class="item">
            <img src="/static/promo-2.jpg" alt="Feature Image" />
            <div class="carousel-caption">
                <h4>Peach Pudding</h4>
                <p>Peach Pudding cakes are the latest masterpiece of dessert chefs at Dessert House. Taste for free. You can never miss it!</p>
            </div>
        </div>
        <div class="item">
            <img src="/static/promo-3.jpg" alt="Feature Image" />
            <div class="carousel-caption">
                <h4>Attention!</h4>
                <p>Dessert House's first Cake Party opens 8 PM, Saturday. Tell your friends about it and go together!</p>
            </div>
        </div>
    </div>
    <a data-slide="prev" href="#feature-slide" class="carousel-control left">&lsaquo;</a>
    <a data-slide="next" href="#feature-slide" class="carousel-control right">&rsaquo;</a>
</div>

<div class="row">
    <div class="span9">
        <h3 class="well" id="whats-hot">What's Hot</h3>
        <ul class="thumbnails">
            <li class="span6">
                {% with item=feature %}
                {% include "shop/item-cell.html" %}
                {% endwith %}
            </li>
            {% for item in feature_side %}
            <li class="span3">
                {% include "shop/item-cell.html" %}
            </li>
            {% endfor %}
        </ul>
        <ul class="thumbnails">
            {% for item in feature_below %}
            <li class="span3">
                {% include "shop/item-cell.html" %}
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="span3">
        <div class="well">
            <h3>Tips</h3>
            <dl>
                <dt>
                    <i class="icon-user"></i>
                    Membership
                </dt>
                <dd>To buy the delicious desserts on this site, membership is required. The registration process is easy and quick. 
                {% if not user.is_authenticated %}
                    <p>
                        <a href="/register">
                            <span class="btn btn-success btn-mini">Register Now</psan>
                        </a>
                    </p>
                {% endif %}
                </dd>
                <dt>
                    <i class="icon-check"></i>
                    Activation
                </dt>
                <dd>You have an account now and you have to activate it by charging in 100 or more dollars. After that, you can start buying items on this site.</dd>
                <dt>
                    <i class="icon-adjust"></i>
                    Expiration
                </dt>
                <dd>Once activated, your account would be active for one year. After that, you have to reactivate it.</dd>
                <dt>
                    <i class="icon-star"></i>
                    Member Level
                </dt>
                <dd>The more you buy, the larger discount rate you will get. Fresh accounts belongs to Basic level. The discount rates for different levels are listed as below:
                    <table cellspacing="0" class="table table-striped table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th>Level</th>
                                <th>Discount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Platinun</td>
                                <td>0.80</td>
                            </tr>
                            <tr>
                                <td>Golden</td>
                                <td>0.85</td>
                            </tr>
                            <tr>
                                <td>Silver</td>
                                <td>0.90</td>
                            </tr>
                            <tr>
                                <td>Bronze</td>
                                <td>0.95</td>
                            </tr>
                            <tr>
                                <td>Basic</td>
                                <td>1.00</td>
                            </tr>
                        </tbody>
                    </table>
                </dd>
            </dl>
        </div>
    </div>
</div>
{% endblock %}
